<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <title>天猫注册</title>
    <link rel="icon" href="https://g.alicdn.com/mui/global/1.2.35/file/favicon.ico"/>
    <%--    jquery   css--%>
    <link rel="stylesheet" href="/static/css/public.css"/>
    <link rel="stylesheet" href="/static/css/user/reg.css"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
</head>
<body>
        <div class="form-list form-main-list">
                <div class="form-group">
                    <div class="form-item">
                        <span class="form-value">电子邮箱</span>
                        <input class="form-text" placeholder="请输入邮箱" type="text" id="email">
                        <span id="email-error" style="display: none; margin-left: 4px;"><i class="image-icon"></i><i class="error-text" style="color: black"> </i></span>
                    </div>
                    <div class="form-item" style="margin-top: 10px">
                        <button class="form-submit" style="background: #ff0036;" id="next">下一步</button>
                    </div>
                </div>
        </div>
</body>
<script>
    var isCheck = false;
    $(function () {
        $("#email").blur(function () {
            console.log("123");
            var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
            var email = $("#email");
            var error = $("#email-error");
            var icon = $(".image-icon");
            var text = $(".error-text");
            // 验证
            var isNull = null == $(this).val() || "" == $(this).val();
            if(isNull){
                error.show();
                icon.show().removeClass("children_icon2").addClass("children_icon1");
                text.css("color","#ff3f13").text("请输入你的电子邮箱");
                email.css({"border":"1px solid #ff3f13","color":"#ff3f13"});
                isCheck = false;
                return;
            }
            if(!reg.test($(this).val())){
                error.show();
                icon.show().removeClass("children_icon2").addClass("children_icon1");
                text.css("color","#ff3f13").text("邮箱格式不正确，请重新输入");
                email.css({"border":"1px solid #ff3f13","color":"#ff3f13"});
                isCheck = false;
                return;
            }
            error.show();
            icon.removeClass("children_icon1").addClass("children_icon2");
            text.text("");
            email.css({"border":"1px solid #dedede", "color":"1px solid #dedede"});
            isCheck = true;

        })
        // 点击下一步
        $("#next").click(function () {
            if(!isCheck){
                return false;
            }
            // 让下一页展示出来
            $.ajax({
                type:"POST",
                url:"register/sent_email.htm",
                async:true,
                data: {'email': $("#email").val()},
                success:function (html) {
                    // 发送邮箱有延迟，让按钮禁止继续点击1.5秒，再渲染页面
                    $("#next").addClass("layui-btn-disabled").prop("disabled",true);
                    setTimeout(function () {
                        $("#next").removeClass("layui-btn-disabled").prop("disabled",false);
                        $(".emaill-dialog").show().html(html);
                    }, 1500);
                }
            });
        })
    })
</script>
</html>
